document.addEventListener('DOMContentLoaded', function() {
    // 初始化应用
    initApp();
    
    // 添加导航事件监听
    setupNavigation();
    
    // 添加交互功能
    setupInteractions();
    
    // 模拟数据更新
    simulateDataUpdates();
});

// 初始化应用
function initApp() {
    console.log('情侣APP原型已加载');
    
    // 显示当前日期
    updateCurrentDate();
    
    // 初始化电池动画
    initBatteryAnimation();
    
    // 初始化时空胶囊倒计时
    initCapsuleCountdown();
}

// 设置导航
function setupNavigation() {
    // 获取所有导航项
    const navItems = document.querySelectorAll('.nav-item');
    
    // 为每个导航项添加点击事件
    navItems.forEach(item => {
        item.addEventListener('click', function() {
            // 移除所有导航项的active类
            navItems.forEach(nav => nav.classList.remove('active'));
            
            // 为当前点击的导航项添加active类
            this.classList.add('active');
            
            // 获取当前点击的导航项对应的页面类型
            const pageType = this.querySelector('span').textContent;
            
            // 模拟页面切换（实际应用中会切换到对应页面）
            console.log(`切换到${pageType}页面`);
        });
    });
    
    // 添加快捷操作按钮点击事件
    const actionBtns = document.querySelectorAll('.action-btn');
    actionBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const actionType = this.querySelector('span').textContent;
            console.log(`执行${actionType}操作`);
        });
    });
}

// 设置交互功能
function setupInteractions() {
    // 登录按钮点击事件
    const loginBtn = document.querySelector('.login-screen .btn');
    if (loginBtn) {
        loginBtn.addEventListener('click', function() {
            console.log('登录操作');
            // 模拟登录成功后跳转
            // window.location.href = 'dashboard.html';
        });
    }
    
    // 绑定按钮点击事件
    const bindBtn = document.querySelector('.binding-screen .btn:last-child');
    if (bindBtn) {
        bindBtn.addEventListener('click', function() {
            console.log('绑定操作');
            // 模拟绑定成功后跳转
            // window.location.href = 'dashboard.html';
        });
    }
    
    // 添加活动按钮点击事件
    const addActivityBtns = document.querySelectorAll('.add-activity');
    addActivityBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            console.log('添加新内容');
            // 模拟弹出添加内容的表单
            alert('添加新内容');
        });
    });
    
    // 聊天发送按钮点击事件
    const sendBtn = document.querySelector('.chat-input .fa-paper-plane');
    if (sendBtn) {
        sendBtn.addEventListener('click', sendMessage);
    }
    
    // 聊天输入框回车发送
    const chatInput = document.querySelector('.chat-input input');
    if (chatInput) {
        chatInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
    }
    
    // 日历日期点击事件
    const calendarDays = document.querySelectorAll('.calendar-day:not(:empty)');
    calendarDays.forEach(day => {
        if (day.textContent.trim() !== '') {
            day.addEventListener('click', function() {
                console.log(`查看${day.textContent}日的事件`);
                // 模拟显示该日期的事件详情
            });
        }
    });
}

// 发送消息功能
function sendMessage() {
    const chatInput = document.querySelector('.chat-input input');
    const chatMessages = document.querySelector('.chat-messages');
    
    if (chatInput && chatInput.value.trim() !== '') {
        // 获取当前时间
        const now = new Date();
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const timeString = `${hours}:${minutes}`;
        
        // 创建新消息元素
        const messageHTML = `
            <div class="message sent">
                <div class="message-content">
                    ${chatInput.value}
                    <div class="message-time">${timeString}</div>
                </div>
            </div>
        `;
        
        // 添加消息到聊天区域
        chatMessages.insertAdjacentHTML('beforeend', messageHTML);
        
        // 清空输入框
        chatInput.value = '';
        
        // 滚动到底部
        chatMessages.scrollTop = chatMessages.scrollHeight;
        
        // 模拟对方回复
        setTimeout(simulateReply, 1000);
    }
}

// 模拟对方回复
function simulateReply() {
    const chatMessages = document.querySelector('.chat-messages');
    
    // 获取当前时间
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const timeString = `${hours}:${minutes}`;
    
    // 随机回复内容
    const replies = [
        '好的，没问题！',
        '我知道了，亲爱的~',
        '我爱你！❤️',
        '稍后见！',
        '我正在忙，晚点回复你哦'
    ];
    
    const randomReply = replies[Math.floor(Math.random() * replies.length)];
    
    // 创建新消息元素
    const messageHTML = `
        <div class="message received">
            <div class="message-content">
                ${randomReply}
                <div class="message-time">${timeString}</div>
            </div>
        </div>
    `;
    
    // 添加消息到聊天区域
    chatMessages.insertAdjacentHTML('beforeend', messageHTML);
    
    // 滚动到底部
    chatMessages.scrollTop = chatMessages.scrollHeight;
}

// 更新当前日期
function updateCurrentDate() {
    const dateElements = document.querySelectorAll('.steps-date, .battery-date');
    
    // 获取当前日期
    const now = new Date();
    const year = now.getFullYear();
    const month = (now.getMonth() + 1).toString().padStart(2, '0');
    const day = now.getDate().toString().padStart(2, '0');
    const dateString = `${year}/${month}/${day}`;
    
    // 更新日期显示
    dateElements.forEach(el => {
        if (el) el.textContent = dateString;
    });
}

// 初始化电池动画
function initBatteryAnimation() {
    // 获取电池元素
    const batteryLevels = document.querySelectorAll('.battery-level');
    
    // 为每个电池元素添加动画
    batteryLevels.forEach(level => {
        const width = level.style.width;
        level.style.width = '0';
        
        setTimeout(() => {
            level.style.transition = 'width 1.5s ease-in-out';
            level.style.width = width;
        }, 300);
    });
}

// 初始化时空胶囊倒计时
function initCapsuleCountdown() {
    // 获取所有倒计时元素
    const countdowns = document.querySelectorAll('.capsule-countdown');
    
    // 更新倒计时
    countdowns.forEach(countdown => {
        if (countdown.textContent.includes('天解锁')) {
            // 提取天数
            const days = parseInt(countdown.textContent.match(/\d+/)[0]);
            
            // 如果天数大于0，则每天减少1天
            if (days > 0) {
                // 模拟倒计时，实际应用中应该使用服务器时间
                setInterval(() => {
                    const currentDays = parseInt(countdown.textContent.match(/\d+/)[0]);
                    if (currentDays > 0) {
                        countdown.textContent = `还有${currentDays - 1}天解锁`;
                    } else {
                        countdown.textContent = '已解锁';
                        countdown.style.color = '#4caf50';
                    }
                }, 86400000); // 24小时 = 86400000毫秒
            }
        }
    });
}

// 模拟数据更新
function simulateDataUpdates() {
    // 模拟步数更新
    setInterval(() => {
        const stepValues = document.querySelectorAll('.status-card-value');
        stepValues.forEach(value => {
            if (value.textContent.includes(',')) {
                // 提取数字
                let steps = parseInt(value.textContent.replace(',', ''));
                
                // 随机增加步数
                steps += Math.floor(Math.random() * 100);
                
                // 更新显示
                value.textContent = steps.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            }
        });
    }, 60000); // 每分钟更新一次
    
    // 模拟电池电量变化
    setInterval(() => {
        const batteryLevels = document.querySelectorAll('.battery-level');
        const batteryInfos = document.querySelectorAll('.battery-info div:first-child');
        
        batteryLevels.forEach((level, index) => {
            // 获取当前宽度百分比
            let width = parseInt(level.style.width);
            if (isNaN(width)) {
                width = parseInt(level.style.width) || 100;
            }
            
            // 随机减少电量
            width -= Math.floor(Math.random() * 2);
            if (width < 0) width = 0;
            
            // 更新电量显示
            level.style.width = `${width}%`;
            if (batteryInfos[index]) {
                batteryInfos[index].textContent = `${width}%`;
            }
            
            // 根据电量更新样式
            if (width < 20) {
                level.classList.add('low');
                level.classList.remove('medium');
            } else if (width < 50) {
                level.classList.add('medium');
                level.classList.remove('low');
            } else {
                level.classList.remove('low', 'medium');
            }
        });
    }, 300000); // 每5分钟更新一次
}